<template>
	<view class="cu-modal" :class="show">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">{{title}}</view>
				<view class="action" @tap="close()">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="padding-xl">
				<slot name="content">{{content}}</slot>				
			</view>
			<view class="cu-bar bg-white justify-center">
				<view class="action">
					<button class="cu-btn line-blue text-blue margin-rigth-lg " @tap="_cancel()">{{buttons[0]}}</button>
					<button class="cu-btn bg-blue  margin-left-lg" @tap="_confirm()">{{buttons[1]}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'app-modal',
		data() {
			return {
				show: '',
				confirm: null,
				cancel: null
			};
		},
		methods: {
			open(confirm, cancel) {
				this.show = "show";
				this.confirm = confirm;
				this.cancel = cancel;
			},
			close() {
				this.show = "";
			},
			_confirm() {
				this.confirm && typeof this.confirm === "function" && this.confirm();
				this.close();  
			},
			_cancel() {
				this.cancel && typeof this.cancel === "function" && this.cancel();
				this.close();
			}
		},
		props: {  
			title: {
				type: String,
				default: "温馨提示"
			},
			content: {
				type: String,
				default: "想说点啥呢..."
			},
			buttons: {
				type: Array,
				default () {
					return ["取消", "确认"];
				}
			}
		}
	}
</script>

<style>

</style>
